<template>
  <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose" title="规章制度">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="简要说明" prop="simpledetails">
        <el-input v-model="ruleForm.simpledetails"></el-input>
      </el-form-item>
      <el-form-item label="上传附件" prop="fujianurl">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          multiple
          :on-success="handleAvatarSuccess"
          ref="ersty"
          :on-error="handleAvatarError"
          :before-remove="beforeRemove"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="正文内容" prop="textdetails">
        <quill ref="quill" v-model="ruleForm.textdetails" @textChange="textChange"></quill>
        <!-- <quill ref="quill" :v-model="ruleForm.desc"></quill>  -->
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="dialogValue('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import quill from "@/components/quill/index";
import { addFileDownload, changeFileDownload } from "@/api/regulations";

// 引入vuex
import { mapGetters } from "vuex";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: true,
    },
    addMode: {
      type: Boolean,
    },
  },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  components: {
    quill,
  },
  data() {
    var fujianurl = (rule, value, callback) => {
      if (this.fujianurl == "") {
        return callback(new Error("上传文件为空"));
      } else {
        callback();
      }
    };
    return {
      id: null, //修改必须的id
      comid: null, //用户ID
      userid: null, //登录id
      loginname: null, //发布人
      valueName: "请输入帮助名称",
      titleNode: "下载数目",
      fileList: [], //存放服务器文件数据
      ruleForm: {
        id: "",
        title: "",
        loginname: "",
        simpledetails: "",
        fujianurl: "",
        fjname: "",
        textdetails: "",
      },
      fujianurl: "",
      fjname: "",
      uploadUrl: "",
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],

        textdetails: [
          { required: true, message: "请输入正文内容", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    data() {
      if (this.addMode == false) {
        if (this.data.length != 0) {
          this.ruleForm = this.data;
          this.fileListUrl();
          this.ruleForm.loginname = this.userInfo.loginname;
        }
      }
    },
    dialogVisible() {
      if (this.dialogVisible == true) {
        if (this.addMode) {
          setTimeout(() => {
            this.$refs.ersty.clearFiles();
            this.$refs.quill.setContents("");
          }, 0);
        } else {
          setTimeout(() => {
            this.$refs.quill.onHtml(this.ruleForm.textdetails);
          }, 0);
        }
      }
    },
  },
  created() {
    this.uploadUrl = this.VUE_APP_BASE_API + "/common/webupload.shtml";
    // this.totalNum = this.tableData.length;
    this.comid = this.userInfo.comid;
    this.userid = this.userInfo.userid;
    this.ruleForm.loginname = this.userInfo.loginname;
  },
  methods: {
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    //删除上传的文件列表
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 修改时把文件名和地址添加到上传组件当中
    fileListUrl() {
      if (this.ruleForm.fjname != "") {
        let url = {
          name: this.ruleForm.fjname,
          url: this.ruleForm.fujianurl,
        };
        this.fileList = [];
        this.fileList.push(url);
      }
    },
    // 富文本
    textChange(d) {
      this.ruleForm.textdetails = d;
    },
    // 获取文件URL和文件名
    handleAvatarSuccess(res, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.fujianurl =res.url;
      this.fjname = file.name;
      console.log(this.fujianurl);
    },
    // 成功上传后返回
    handleAvatarError(err, file, fileList) {
      this.$message.error("上传失败");
      console.log(err, file, fileList);
      // alert(err, file, fileList)
    },
    // 添加
    async addFileDownload() {
      let params = {
        title: this.ruleForm.title,
        simpledetails: this.ruleForm.simpledetails,
        "creator.userid": this.userid,
        fujianurl: this.fujianurl,
        fjname: this.fjname,
        textdetails: this.ruleForm.textdetails,
        type: 2,
      };
      let data = await addFileDownload(params);
      if (data.error == "1") {
        this.$message.error("系统错误，新增失败");
      } else {
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.empty();
        this.$emit("finish", 1);
        this.$emit("update:dialogVisible", false);
      }
    },
    // 修改接口
    async changeFileDownload() {
      let params = {
        id: this.ruleForm.id,
        title: this.ruleForm.title,
        simpledetails: this.ruleForm.simpledetails,
        "creator.userid": this.userid,
        fujianurl: this.fujianurl,
        fjname: this.fjname,
        textdetails: this.ruleForm.textdetails,
        type: 2,
      };
      let data = await changeFileDownload(params);
      if (data.error == "1") {
        this.$message.error("系统错误，修改失败");
      } else {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.empty();
        this.$emit("finish", 1);
        this.$emit("update:dialogVisible", false);
      }
    },
    //  添加数据
    dialogValue(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addMode) {
            this.addFileDownload();
          } else {
            this.changeFileDownload();
          }
        } else {
          this.$message.error("有错误，请检验是否输入必选项");
          return false;
        }
      });
    },
    empty() {
      this.ruleForm.id = "";
      this.ruleForm.title = "";
      this.ruleForm.simpledetails = "";
      this.ruleForm.fujianurl = "";
      this.ruleForm.fjname = "";
      this.ruleForm.textdetails = "";
    },
  },
};
</script>
<style>
</style>
